<template>
    <div class="father" :data-floor="CONFIG.floor">
        <div class="header">
            <div class="left">
                <div class="img">
                    <el-image :src="CONFIG.header_url" fit="cover"></el-image>
                </div>
                <div class="describe">
                    <p class="name">{{CONFIG.user_nick_name}}</p>
                    <p class="introduce">{{CONFIG.signature}}</p>
                </div>
            </div>
            <div class="center">
                <div class="txt">
                    {{CONFIG.content}}
                </div>
                <i class="iconfont icon-dianzan icon-dianzan-green" ref="dianzan" @click="dianzan" v-bind:class="{green:CONFIG.ifLike}">
                    <span v-show="!(CONFIG.comments_like==0)">{{CONFIG.comments_like}}</span><span v-show="CONFIG.comments_like==0">赞</span>
                </i>
            </div>
            <div class="right">
                <div class="floor">{{CONFIG.floor}}楼</div>
                <div class="time">{{CONFIG.create_time | dayFix3}}</div>
                <el-button type="success" @click="callback(false)" v-if="!ifCallBack">回复</el-button>
                <div class="two_button" v-if="ifCallBack">                
                    <el-button type="primary" @click="callback(true)" >确认</el-button>
                    <el-button type="danger" @click="callback(false)">取消</el-button>
                </div>

            </div>
        </div>
        <div class="input-father" v-show="ifCallBack">
            <textarea @input="number" v-model="textarea" id="text" placeholder="请输入文字" rows="8" cols="130" style="resize: none;"></textarea>
            <div class="num">{{numbers}}/250</div>
        </div>
        <CommentsListChild v-for="(val,index) in childrenLength" :key="CONFIG.children[index].comment_id" 
        @send="unshiftChild" 
        :config="CONFIG.children[index]" :article_id="article_id"></CommentsListChild>
        <el-divider></el-divider>
    </div>
</template>

<script>
import CommentsListChild from './CommentsListChild'
export default {
    name: 'CommentsList',
    props:['config','article_id'],
    data() {
        return {
            ifCallBack:false,
            textarea:'',
            numbers:0,
            CONFIG:{
                comment_id: null,
                comments_like: null,
                content: "",
                create_time: '',
                floor: null,
                header_url: '',
                signature: '',
                user_id: null,
                user_nick_name:'',
                ifLike:false
            },
            childrenLength:0
        };
    },
    created() {
        this.CONFIG = this.config
        if(!this.CONFIG['children']){
            this.CONFIG['children'] = []
            this.childrenLength = 0;
        }else{
            this.childrenLength = this.CONFIG['children'].length;
        }
    },
    methods: {
        callback(flag) {
            this.ifCallBack = !this.ifCallBack
            if(flag){
                let obj = {
                    article_id:this.article_id,
                    father_id:this.CONFIG.comment_id,
                    reply_id:this.CONFIG.user_id,
                    root_id:this.CONFIG.comment_id,
                    content:this.textarea
                }
                this.$store.dispatch('detail/reqCommentReply', obj).then((result)=>{
                    if(result.data.status == '200'){
                        if(!this.CONFIG.children){
                            this.CONFIG.children = []
                        }
                        this.CONFIG.children.unshift(result.data.data[0])
                        this.childrenLength++
                    }
                })
            }
            this.textarea = ''
        },
        number() {
            this.numbers = this.textarea.length
            if(this.numbers>250){
                this.numbers=250
                this.textarea = this.textarea.substr(0,250)
            }
        },
        //点赞评论
        dianzan(){
            let num = 1;
            if(this.$refs.dianzan.classList.contains('green')){
                num = -1
            }else{
                num = 1;
            }
            this.$store.dispatch('detail/reqDianZan', {num,comment_id:this.CONFIG.comment_id}).then((result)=>{
               if(result.data.status == '200' ){
                if(num == 1){
                    console.log('点赞');
                    this.CONFIG.comments_like++;
                    this.$refs.dianzan.classList.add('green')
                }else{
                    console.log('取消点赞');
                    this.CONFIG.comments_like--;
                    this.$refs.dianzan.classList.remove('green')
                }
               }
            })
        },
        //子回复拿到父亲来渲染
        unshiftChild(data){
            if(!this.CONFIG.children){
                this.CONFIG.children = []
            }
            this.CONFIG.children.unshift(data)
            this.childrenLength++
        }
    },
    watch: {
        config(newValue, oldValue) {
            this.CONFIG = this.config
        },
    },
    components: { CommentsListChild },
};
</script>

<style lang="less" scoped>
    .father{
        width: 90%;
        margin: 0 auto;
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        .header{
            width: 100%;
            min-height: 80px;
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            justify-content: stretch;
            position: relative;
            .left{
                display: flex;
                flex-direction: row;
                align-items: center;
                width: 20%;
                &>.img{
                width: 50px;
                height: 50px;
                border: 4px solid black;
                border-radius: 50%;
                overflow: hidden;
                    .el-image{
                        width: 100%;
                        height: 100%;
                        transition: transform 0.4s ease-out;
                        &:hover{
                            transform: rotate(360deg);
                        }
                    }
                }
                &>.describe{
                    margin-left: 5px;
                    &>p{
                        font-family: 'FZZYJT';
                        font-weight: bolder;
                    }
                    .name{
                        margin-bottom: 15px;
                    }
                    .introduce{
                        font-size:14px;
                        width: 100px;
                        color:#8d8a8a;
                        overflow: hidden;
                        text-overflow:ellipsis;
                    }
                }
            }
            .right{
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                position: absolute;
                right: 22px;
                top: 0px;
                .two_button{
                    display: flex;
                    flex-direction: row;
                    &>.el-button{
                    width: 70px;
                    height: 30px;
                    padding: 5px 10px 5px 10px;
                    transform: translate(25px,10px);
                    }
                }
                &>div{
                    font-family: 'FZZYJT';
                    user-select: none;
                }
                .floor{
                    font-size: 14px;
                    height: 25px;
                }
                .time{
                    color: #8d8a8a;
                }
                &>.el-button{
                    width: 70px;
                    height: 30px;
                    padding: 5px 10px 5px 10px;
                    transform: translate(-10px,10px);
                }
            }
            .center{
                width: 60%;
                height: 100%;
                margin-left:30px ;
                position: relative;
                .txt{
                    min-height: 80px;
                    font-family: 'FZZYJT';
                    font-weight:bolder ;
                }
                i{
                    font-size: 25px;
                    position: absolute;
                    right: -25px;
                    bottom: -10px;
                    cursor: pointer;
                    &>span{
                        font-size:18px ;
                    }
                    &:hover{
                        color: #67c23a;
                    }
                }
                .green{
                    color:#67c23a;
                }
            }

        }
        .input-father{
            width:100%;
            margin-left:12px ;
            margin-top: 20px;
            position: relative;
            border-radius: 1em;
            height: 190px;
            overflow: hidden;
            border: 4px black solid;
            background-color:white ;
            #text{
                font-size: 15px;
                font-family: 'FZZYJT';
                outline: none;
                line-height: 33px;
                text-indent:  5px each-line;
                transform: translate(15px,5px);
                border: none;
            }
            &>.num{
                position: absolute;
                right: 10px;
                bottom: 7px;
            }
        }
    }
</style>